<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本框验证示例</title>
    <style>
        .placeholder-text {
            color: gray;
        }
    </style>
</head>
<body>
    <h2>文本框验证示例</h2>
    <form id="textForm">
        <label for="requiredField">单行文本框 (必填):</label>
        <input type="text" id="requiredField" name="requiredField" class="placeholder-text" value="该填写的内容" onblur="checkInput(this)" onfocus="clearPlaceholder(this)"><br><br>
        <label for="optionalField">可选文本框:</label>
        <input type="text" id="optionalField" name="optionalField"><br><br>
        <button type="button" onclick="submitForm()">提交</button>
        <button type="reset">重置</button>
    </form>

    <script>
        function clearPlaceholder(input) {
            if (input.value === '该填写的内容') {
                input.value = '';
                input.style.color = '';
            }
        }

        function restorePlaceholder(input) {
            if (input.value.trim() === '') {
                input.value = '该填写的内容';
                input.style.color = 'gray';
            }
        }

        function checkInput(input) {
            restorePlaceholder(input); // 在失焦时检查并恢复默认值（如果需要）
            if (input.id === 'requiredField' && input.value.trim().length < 8) {
                alert('至少8个字符');
            }
        }

        function submitForm() {
            const requiredField = document.getElementById('requiredField');
            checkInput(requiredField); // 提交前再次检查必填字段
            if (requiredField.value.trim() !== '该填写的内容' && requiredField.value.trim().length >= 8) {
                // 表单有效，可以执行提交操作（此处为示例，未实际提交表单）
                console.log('表单内容有效，可以提交');
                // 如果需要，可以在此处添加表单提交的代码，例如：document.getElementById('textForm').submit();
            }
        }
    </script>
</body>
</html>